import React, { useState,useImperativeHandle} from 'react';
import { Modal, Button,Input,Upload, message,Radio  } from 'antd';
import Avatar from'./Avatar.js'
import './ModalB.less'


function ModalB({childRef}) {
  useImperativeHandle(childRef, () => ({
            showModal,
    }));
    const [isModalVisible, setIsModalVisible] = useState(false);
    
    const showModal = () => {
      setIsModalVisible(true);
    };
  
    const handleOk = () => {
      setIsModalVisible(false);
    };
  
    const handleCancel = () => {
      setIsModalVisible(false);
    };
    // 单选框
    const [value, setValue] = React.useState(1);

    const onChange = e => {
      console.log('radio checked', e.target.value);
      setValue(e.target.value);
    };
   return (
      <div className="modalb">
        { <a  onClick={showModal}>
          编辑
        </a> }
        <Modal centered={true} className="aaa" title="编辑" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}  destroyOnClose={true}
            footer={[
                <Button id="btn1">确认</Button>,
                <Button id="btn2" onClick={handleCancel}>取消</Button>
            ]}        
        >    
            <div className="modalc">
             <div className="d1">
                 <span>服务名称：</span>
                 <Input placeholder="请输入名称"></Input>
             </div>
             <div className="d2">
                 <span>服务图标：</span>
                 <Avatar/>
                 
             </div>
             <div className="d3">
                 <span>服务描述：</span>
                 <Input placeholder="请输入描述"></Input>
             </div>

             <div className="d4">
                 <span>服务费用：</span>
                 <Input placeholder="请输入费用"></Input>
             </div>

             <div className="d5">
                 <span>排序：</span>
                 <Input placeholder="请输入排序数字（数字越大越靠前）"></Input>
             </div>

             <div className="d6">
                 <span>状态：</span>
                 <Radio.Group onChange={onChange} value={value}>
                    <Radio value={1}>启用</Radio>
                    <Radio value={2}>禁用</Radio>
                 </Radio.Group>
             </div>
             </div>
        </Modal>
    </div>
  );
};

export default ModalB